<template>
  <div class="">
    <a class="phone-nav" @click="phoneclick"><i class="fa fa-list"></i></a>
    <div>
      <div>
        <!--PC端  Mmenu-->
        <div class="top" :style="style">
          <nav v-if="pcshow">
            <ul>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px;"
                /></a>
              </li>
              <li>
                <a  @mouseover="mouseover1" 
                  ><div class="headerTitle">Close Shot of Xiqiao Mountain</div></a
                >
                <div
                  class="menuItem1"
                  v-show="menuItem1Show"
                  @mouseleave="mouseleave1"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <el-col>
                        <div class="firstMenufont" @click="changeOutline">
                          Brief Introduction
                        </div>
                      </el-col>
                      <el-col
                        ><div class="firstMenufont" @click="changeHistory">
                          History
                        </div></el-col
                      >
                    </el-col>
                    <el-col :span="12" class="secondMenuItemFont">
                      <el-col
                        ><div class="firstMenufont" @click="changeScenicSpots">
                          Xiqiao Mountain
                        </div>
                      </el-col>
                      <el-col>
                        <div @click="changeScenicSpots">
                          Brief Introduction
                        </div>
                      </el-col>
                    
                      <el-col
                        ><div @click="changeScenicSpots">
                          Honor
                        </div>
                      </el-col>
                      <el-col>
                        <div @click="changeScenicSpots">
                          Contact Us
                        </div>
                      </el-col>
                    </el-col>
                  </el-row>
                </div>
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px;"
                /></a>
              </li>
              <li>
                <a href="#" @mouseover="mouseover2" @click="changeInfo" 
                  ><div class="headerTitle">Information Center </div></a
                >
                <div
                  class="menuItem2"
                  v-show="menuItem2Show"
                  @mouseleave="mouseleave2"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <el-col class="firstMenufont">
                        <div @click="changeInfo">
                          Service Center
                        </div>
                      </el-col>
                      <el-col class="firstMenufont">
                        <div @click="changeInfo">
                          Ticket affair of scenic area
                        </div>
                      </el-col>
                    </el-col>
                  </el-row>
                </div>
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px;"
                /></a>
              </li>
              <li>
                <a href="#" @mouseover="mouseover3" @click="changeRoad" 
                  ><div class="headerTitle">Xiqiao Green Path </div> </a
                >
                <div
                  class="menuItem3"
                  v-show="menuItem3Show"
                  @mouseleave="mouseleave3"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <el-col class="firstMenufont">
                        <div @click="changeRoad">
                          Brief Introduction of Green Path
                        </div>
                      </el-col>
                      <!-- <el-col> 仏山市南海区西樵鎮Brief Introduction of Green Path </el-col> -->
                      <el-col class="firstMenufont" style="margin-top:20px">
                        <div @click="changeRoad">
                          Station Management
                        </div>
                      </el-col>
                      <!-- <el-col>
                        雄威Xiqiao Green Path莘村サービスエリアの自転車レンタルに関するご案内ホテル
                      </el-col> -->
                      <el-col class="firstMenufont" style="margin-top:20px">
                        <div @click="changeRoad">
                          Green Path Management Framework
                        </div>
                      </el-col>
                      <!-- <el-col> Xiqiao Green Pathの管理規定 </el-col> -->
                    </el-col>
                  </el-row>
                </div>
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                   style="width:1px;height:23px;"
                /></a>
              </li>
              <li>
                <img
                  src="../assets/xqsimage/toplogo.png"
                  style="width:196px;height:194px"
                />
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px;"
                /></a>
              </li>
              <li>
                <a href="#" @mouseover="mouseover4" 
                  ><div class="headerTitle">Culture of Xiqiao Mountain</div></a
                >
                <div
                  class="menuItem4"
                  v-show="menuItem4Show"
                  @mouseleave="mouseleave4"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <el-col>
                        <div class="firstMenufont" @click="changeCustoms">
                          Custom and Culture
                        </div>
                      </el-col>
                      <el-col>
                        <div style="cursor:pointer;" @click="seeCustomsInfo(1)">
                          Tai Sin Birthday
                        </div>
                      </el-col>
                      <el-col>
                        <keep-alive>
                          <div
                            style="cursor:pointer;"
                            @click="seeCustomsInfo(2)"
                          >
                            Mountain Climb in the Double Ninth Festival
                          </div>
                        </keep-alive>
                      </el-col>
                      <el-col>
                        <div style="cursor:pointer;" @click="seeCustomsInfo(3)">
                          Flower Appreciation Meeting
                        </div>
                      </el-col>
                      <el-col
                        ><div
                          style="cursor:pointer;"
                          @click="seeCustomsInfo(4)"
                        >
                          Lion Dance
                        </div>
                      </el-col>
                      <el-col
                        ><div
                          style="cursor:pointer;"
                          @click="seeCustomsInfo(5)"
                        >
                          Tea Culture
                        </div>
                      </el-col>
                    </el-col>
                    <el-col :span="12" class="secondMenuItemFont">
                      <el-col>
                        <div class="firstMenufont" @click="changeCelebrity">
                          Celebrity Anecdote
                        </div>
                      </el-col>
                      <el-col
                        ><div
                          style="cursor:pointer;"
                          @click="seeCelebrityInfo(1)"
                        >
                          CHEN Qiyuan
                        </div>
                      </el-col>
                      <el-col
                        ><div
                          style="cursor:pointer;"
                          @click="seeCelebrityInfo(2)"
                        >
                          HUANG Feihong
                        </div>
                      </el-col>
                      <el-col>
                        <div
                          style="cursor:pointer;"
                          @click="seeCelebrityInfo(3)"
                        >
                          FU Deyong
                        </div>
                      </el-col>
                      <el-col
                        ><div
                          style="cursor:pointer;"
                          @click="seeCelebrityInfo(4)"
                        >
                          XIAN Yuqing
                        </div>
                      </el-col>

                      <el-col
                        ><div
                          style="cursor:pointer;"
                          @click="seeCelebrityInfo(5)"
                        >
                          HUANG junBi
                        </div>
                      </el-col>
                      <el-col
                        ><div
                          style="cursor:pointer;"
                          @click="seeCelebrityInfo(6)"
                        >
                          QU Mengjue
                        </div>
                      </el-col>
                      <el-col
                        ><div
                          style="cursor:pointer;"
                          @click="seeCelebrityInfo(7)"
                        >
                          SHI Jingyi
                        </div>
                      </el-col>
                    </el-col>
                  </el-row>
                </div>
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px;"
                /></a>
              </li>
              <li>
                <a
                  href="#"
                  class="hoverMenu"
                  @mouseover="mouseover5"
                  @click="changeScenery"
                  style="width:120px;"
                  >Scenic Spots</a
                >
                <div
                  class="menuItem5"
                  v-show="menuItem5Show"
                  @mouseleave="mouseleave5"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <el-col>
                        <div class="firstMenufont" @click="seeInfo(1)">
                          Baiyun Cave
                        </div>
                      </el-col>
                      <el-col>
                        <div class="firstMenufont" @click="seeInfo(2)">
                          Green Valley
                        </div>
                      </el-col>
                      <el-col>
                        <div class="firstMenufont" @click="seeInfo(3)">
                          Huang Fei-hong Lion Dance and Martial ArtsAcademy
                        </div>
                      </el-col>
                      <el-col>
                        <div class="firstMenufont" @click="seeInfo(4)">
                          Nine Dragons Cave
                        </div>
                      </el-col>
                      <el-col>
                        <div class="firstMenufont" @click="seeInfo(5)">
                          Stone ScreenWall
                        </div>
                      </el-col>
                      <el-col>
                        <div class="firstMenufont" @click="seeInfo(6)">
                          Square Bamboo Camellia Garden
                        </div>
                      </el-col>
                      <el-col>
                        <div class="firstMenufont" @click="seeInfo(7)">
                          Peach Garden
                        </div>
                      </el-col>
                      <el-col>
                        <div class="firstMenufont" @click="seeInfo(8)">
                          Tianhu Lake
                        </div>
                      </el-col>
                    </el-col>
                  </el-row>
                </div>
              </li>

              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px;"
                /></a>
              </li>
              <li>
                <a href="#" @mouseover="mouseover6" style="width:120px;">Travel Guide</a>
                <div
                  class="menuItem6"
                  v-show="menuItem6Show"
                  @mouseleave="mouseleave6"
                >
                  <el-row style="margin:30px 26px 0px 26px">
                    <el-col :span="12" class="secondMenuItemFont">
                      <el-col>
                        <div class="firstMenufont" @click="changeFood(1)">
                          Eating in Xiqiao Mountain
                        </div>
                      </el-col>
                      <el-col> Xiongwei Hotel </el-col>
                      <el-col> Xiqiao Dabing </el-col>
                      <el-col> Yunwu Tea </el-col>
                      <el-col> Chayote </el-col>
                      <el-col> Osmanthus Flower Wine </el-col>
                      <el-col> Shanshui Jellied Bean Curd </el-col>
                      <el-col> Gynura bicolor </el-col>
                      <el-col> Yun Ying Qiong Lou Hotel </el-col>
                      <el-col> Xiqiao Mountain Hotel </el-col>
                      <el-col> Jinquan Hotel </el-col>
                      <el-col> Sanjiang Haixian Fang </el-col>
                      <el-col> Bordeaux Restaurant </el-col>
                      <el-col> Shanyingge Tea Art Hall </el-col>
                      <el-col> Dunhuang Tea Art Hall </el-col>
                    </el-col>
                    <el-col :span="12" class="secondMenuItemFont">
                      <el-col>
                        <div class="firstMenufont" @click="changeFood(2)">
                          Living in Xiqiao Mountain
                        </div>
                      </el-col>
                      <el-col> Yun Ying Qiong Lou Hotel </el-col>
                      <el-col> Xiqiao Mountain Hotel </el-col>
                      <el-col> Xinruncheng Hotel </el-col>
                      <el-col style="margin-top:20px">
                        <div class="firstMenufont" @click="changeFood(3)">
                          Shopping in Xiqiao Mountain
                        </div>
                      </el-col>
                      <el-col> Agile Metropolis Plaza </el-col>
                      <el-col> Xincheng Plaza </el-col>
                      <el-col> Jindian Plaza </el-col>
                      <el-col class="firstMenufont" style="margin-top:20px">
                        <div class="firstMenufont" @click="changeFood(4)">
                          Transportation in Xiqiao Mountain
                        </div>
                      </el-col>
                      <el-col> Self-driving travel route </el-col>
                      <el-col> Xiqiao Traffic Information </el-col>
                      <el-col>
                        Xiqiao Mountain Eco-sightseeing Vehicles
                      </el-col>
                    </el-col>
                  </el-row>
                </div>
              </li>
              <li class="">
                <a
                  ><img
                    src="../assets/xqsimage/nav_r.png"
                    style="width:1px;height:23px;"
                /></a>
              </li>
            </ul>
          </nav>
        </div>

        <!--移动端  Mmenu-->
        <nav id="mmenu" v-show="showPage">
          <div
            style="position:absolute;z-index:999;left:0;top:40px;width:120px"
          >
            <el-menu class="el-menu-vertical-demo">
              <el-submenu index="1">
                <template slot="title">
                  <span>Close Shot of Xiqiao Mountain</span>
                </template>
                <el-menu-item-group
                  ><div @click="changeOutline">
                    Brief Introduction
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="changeHistory">
                    History
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="changeScenicSpots">
                    Xiqiao Mountain
                  </div></el-menu-item-group
                >
              </el-submenu>

              <el-submenu index="2">
                <template slot="title">
                  <span @click="changeInfo">Information Center</span>
                </template>
                <el-menu-item-group
                  ><div @click="changeInfo">
                    Service Center
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="changeInfo">Ticket affair of scenic area</div>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="3">
                <template slot="title">
                  <span @click="changeRoad">Xiqiao Green Path</span>
                </template>
                <el-menu-item-group
                  ><div @click="changeRoad">
                    Brief Introduction of Green Path
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="changeRoad">
                    Station Management
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="changeRoad">
                    Green Path Management Framework
                  </div></el-menu-item-group
                >
              </el-submenu>

              <el-submenu index="4">
                <template slot="title">
                  <span>Culture of Xiqiao Mountain</span>
                </template>
                <el-menu-item-group
                  ><div @click="changeCustoms">
                    Custom and Culture
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="changeCelebrity">
                    Celebrity Anecdote
                  </div></el-menu-item-group
                >
              </el-submenu>

              <el-submenu index="5">
                <template slot="title">
                  <span @click="changeScenery">Scenic Spots</span>
                </template>
                <el-menu-item-group
                  ><div @click="seeInfo(1)">Baiyun Cave</div>
                </el-menu-item-group>
                <el-menu-item-group
                  ><div @click="seeInfo(2)">Green Valley</div>
                </el-menu-item-group>
                <el-menu-item-group
                  ><div @click="seeInfo(3)">
                    Huang Fei-hong Lion Dance and Martial ArtsAcademy
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="seeInfo(4)">Nine Dragons Cave</div>
                </el-menu-item-group>
                <el-menu-item-group
                  ><div @click="seeInfo(5)">Stone ScreenWall</div>
                </el-menu-item-group>
                <el-menu-item-group
                  ><div @click="seeInfo(6)">Square Bamboo Camellia Garden</div>
                </el-menu-item-group>
                <el-menu-item-group
                  ><div @click="seeInfo(7)">Peach Garden</div>
                </el-menu-item-group>
                <el-menu-item-group
                  ><div @click="seeInfo(8)">Tianhu Lake</div>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="6">
                <template slot="title">
                  <span>Travel Guide</span>
                </template>
                <el-menu-item-group
                  ><div @click="changeFood(1)">
                    Eating in Xiqiao Mountain
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="changeFood(2)">
                    Living in Xiqiao Mountain
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="changeFood(3)">
                    Shopping in Xiqiao Mountain
                  </div></el-menu-item-group
                >
                <el-menu-item-group
                  ><div @click="changeFood(4)">
                    Transportation in Xiqiao Mountain
                  </div></el-menu-item-group
                >
              </el-submenu>
            </el-menu>
          </div>
        </nav>

        <!--banner  start-->
        <div class="banner" style="background:#FFF5E0">
          <div>
            <a><img src="../assets/xqsimage/banner1.png"/></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuItem1Show: false,
      menuItem2Show: false,
      menuItem3Show: false,
      menuItem4Show: false,
      menuItem5Show: false,
      menuItem6Show: false,
      showPage: false,
      pcshow: true,
      style: {}
    };
  },
  created() {
    if (this._isMobile()) {
      this.style.height = 50 + "px";
      this.pcshow = false;
    } else {
      this.style.height = 112 + "px";
      this.pcshow = true;
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  mounted() {},
  methods: {
    //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    phoneclick() {
      this.showPage = !this.showPage;
    },
    handleScroll() {
      this.menuItem1Show = false;
      this.menuItem2Show = false;
      this.menuItem3Show = false;
      this.menuItem4Show = false;
      this.menuItem5Show = false;
      this.menuItem6Show = false;
    },
    mouseover1() {
      this.menuItem1Show = true;
      this.menuItem2Show = false;
      this.menuItem3Show = false;
      this.menuItem4Show = false;
      this.menuItem5Show = false;
      this.menuItem6Show = false;
    },
    mouseleave1() {
      this.menuItem1Show = false;
    },
    mouseover2() {
      this.menuItem1Show = false;
      this.menuItem2Show = true;
      this.menuItem3Show = false;
      this.menuItem4Show = false;
      this.menuItem5Show = false;
      this.menuItem6Show = false;
    },
    mouseleave2() {
      this.menuItem2Show = false;
    },
    mouseover3() {
      this.menuItem1Show = false;
      this.menuItem2Show = false;
      this.menuItem3Show = true;
      this.menuItem4Show = false;
      this.menuItem5Show = false;
      this.menuItem6Show = false;
    },
    mouseleave3() {
      this.menuItem3Show = false;
    },
    mouseover4() {
      this.menuItem1Show = false;
      this.menuItem2Show = false;
      this.menuItem3Show = false;
      this.menuItem4Show = true;
      this.menuItem5Show = false;
      this.menuItem6Show = false;
    },
    mouseleave4() {
      this.menuItem4Show = false;
    },
    mouseover5() {
      this.menuItem1Show = false;
      this.menuItem2Show = false;
      this.menuItem3Show = false;
      this.menuItem4Show = false;
      this.menuItem5Show = true;
      this.menuItem6Show = false;
    },
    mouseleave5() {
      this.menuItem5Show = false;
    },
    mouseover6() {
      this.menuItem6Show = true;
      this.menuItem2Show = false;
      this.menuItem3Show = false;
      this.menuItem4Show = false;
      this.menuItem5Show = false;
      this.menuItem1Show = false;
    },
    mouseleave6() {
      this.menuItem6Show = false;
    },
    //美食跳转
    changeFood(infoid) {
      this.$emit("scrollTitle");
      this.$router.push({
        //核心语句
        path: "/food",
        query: {
          id: infoid
        }
      });
      this.showPage = false;
    },
    //概要
    changeOutline() {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/"
      });
    },
    //景区
    changeScenery() {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/scenery"
      });
    },
    //详情()
    seeInfo(infoid) {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/sceneryInfo",
        query: {
          id: infoid
        }
      });
      this.showPage = false;
    },
    //文化
    changeCustoms() {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/customs"
      });
    },
    //文化详情()
    seeCustomsInfo(infoid) {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/customsInfomation",
        query: {
          id: infoid
        }
      });
    },
    //名人物语
    changeCelebrity() {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/celebrity"
      });
    },
    //名人物语详情
    seeCelebrityInfo(infoid) {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/celebrityInfomation",
        query: {
          id: infoid
        }
      });
      this.showPage = false;
    },
    //名胜区
    changeScenicSpots() {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/scenicSpots"
      });
    },
    //情报
    changeInfo() {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/information"
      });
    },
    //道路
    changeRoad() {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/road"
      });
    },
    //历史
    changeHistory() {
      this.$emit("scrollTitle");
      this.$router.push({
        path: "/history"
      });
    }
  }
};
</script>

<style>
.top {
  /* 设置宽度高度背景颜色 */
  height: auto; /*高度改为自动高度*/
  width: 100%;
  margin-left: 0;
  height: 112px;
  background: #fff5e0;
  /* background: white; */
  position: absolute; /*固定在顶部*/
  top: 0; /*离顶部的距离为0*/
  
}
.logo {
  position: absolute;
  z-index: 999;
}
.top ul {
  /* 清除ul标签的默认样式 */
  width: auto; /*宽度也改为自动*/
  list-style-type: none;
  white-space: nowrap;
  overflow: hidden;
  font-size: 18px;
  margin: 0px;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  /* margin-left: calc(50vw - 880px); */
  /* margin-top: 0;          */
}
.top li {
  float: left; /* 使li内容横向浮动，即横向排列  */
  margin-right: 2%; /* 两个li之间的距离*/
  text-align: center;
  line-height: 30px;
  position: relative;
  /* overflow: hidden; */


}

.top li a {
  /* 设置链接内容显示的格式*/
  display: block; 
  text-align: center;
  text-decoration: none; /* 去除下划线 */
  font-weight: 400;
  color: #333333;
  font-family: "Microsoft YaHei";
  padding: 0px;
   /* word-wrap: break-word; */
    /* word-break: normal; */
    /* word-break: normal; */
  /* padding-top: 41px; */
  padding-bottom: 90px;
 
}
.top li a:hover {
  /* 鼠标选中时背景变为黑色 */
  /* background-color: #111; */
  color: #840207;
}
.top ul li ul {
  /* 设置二级菜单 */
  margin-left: -0.2px;
  background: rgb(189, 181, 181);
  position: relative;
  display: none; /* 默认隐藏二级菜单的内容 */
  width: 100px;
}
.top ul li ul li {
  /* 二级菜单li内容的显示 */

  float: none;
  text-align: center;
}
.top ul li:hover ul {
  /* 鼠标选中二级菜单内容时 */
  display: block;

  height: 512px;
  background: #9c242a;
  border-radius: 10px;
}
.menuItem6 {
  width: 700px;
  height: 512px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: -40px;
  right: 50px;
}
.menuItem1 {
  width: 400px;
  height: 258px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: -50px;
}
.menuItem2 {
  width: 348px;
  height: 158px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: -50px;
}
.menuItem3 {
  width: 440px;
  height: 220px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: -50px;
}
.menuItem4 {
  width: 700px;
  height: 360px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  margin-top: -50px;
}
.menuItem5 {
  width: 620px;
  height: 380px;
  background: #9c242a;
  border-radius: 10px;
  position: fixed;
  z-index: 999;
  right: 50px;
  margin-top: -40px;
}
.secondMenuItemFont {
  font-size: 14px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #fff5e0;
  line-height: 30px;
  text-align: left;
}

.firstMenufont {
  font-size: 18px;
  font-family: "Microsoft YaHei";
  font-weight: bold;
  color: #fff5e0;
  line-height: 40px;
  cursor: pointer;
}
.firstMenufontMobile {
  font-weight: 300;
  font-size: 14px;
  font-family: "Microsoft YaHei";
}
.headerTitle{
  width:120px;
  word-break:break-all;
  white-space:normal;
}
</style>
